import React from 'react';
import { Routes, Route, Navigate, NavLink, Outlet } from 'react-router-dom';
const PageIndex = React.lazy(() => import('./pages/index'));
const PageLevel = React.lazy(() => import('./pages/level'));

function Suspense(component) {
  return <React.Suspense fallback={<span>loading...</span>}>{component}</React.Suspense>;
}

export default () => {
  return (
    <>
      <header>
        <NavLink to="/index">首页</NavLink>
        <NavLink to="/level">分级</NavLink>
      </header>
      <div className="main">
        <Routes>
          <Route path="/">
            <Route index element={<Navigate to="/index" />}></Route>
            <Route path="/index" element={Suspense(<PageIndex />)}></Route>
            <Route path="/level" element={Suspense(<PageLevel />)}></Route>
          </Route>
        </Routes>
      </div>
    </>
  );
};
